/** Crown */
html {
    background-color: #e7ebf0;
    color: #666;
}
body { margin: 0; padding: 0;}
::-webkit-scrollbar
{
    width: 8px;
    height: 8px;
    background-color: none;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 .06rem rgba(0,0,0,0.3);
    box-shadow: inset 0 0 .06rem rgba(0,0,0,0.3);
    border-radius: 8px;
    background-color: #fff;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
    border-radius: 8px;
    -webkit-box-shadow: inset 0 0 .06rem rgba(0,0,0,.3);
    box-shadow: inset 0 0 .06rem rgba(0,0,0,.3);
    background-color: #cbcbcb;
}
.layui-display{
}
/** header样式 */
/** 导航栏下面的线条 */
.layui-layout-admin .layui-header .layui-nav .layui-this:after, .layui-layout-admin .layui-header .layui-nav-bar {
    height: 0px;
    background-color: #03152A;
    top: 0 !important;
}

.layui-layout-admin .layui-header .layui-nav .layui-nav-item {
    line-height: 50px; /** 高度重写 */
}

.layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child {
    top: 55px;
}
.layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child a {
    color: #333;
}
.layui-layout-admin .layui-header .layui-nav-item .layui-icon {
    font-size: 16px; /** 图标大小 */
}

.layui-layout-admin .layui-header .layui-layout-left {
    left: 300px;
    padding: 0 10px;
    transition: all .3s;
}

.layui-layout-admin .layui-header .layui-layout-right {
    padding: 0;
}

/** 重写header的背景色和字体颜色 */
.layui-layout-admin .layui-header {
    background-color: #417ac0;
    height: 50px;
    box-shadow: 0 1px 4px 0 rgba(0, 21, 41, .08);
}

.layui-layout-admin .layui-header a {
    color: #fff;
    padding: 0 15px;
}

.layui-layout-admin .layui-header a:hover {
    color: #fff;
}

.layui-layout-admin .layui-header .layui-nav .layui-nav-more {
    border-color: #fff transparent transparent;
}

.layui-layout-admin .layui-header .layui-nav .layui-nav-mored {
    border-color: transparent transparent #fff;
}

/** logo部分样式 */
.layui-layout-admin .layui-header .layui-logo {
    width: 300px;
    background-color: #417ac0;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0);
    color: #eee;
    font-size: 16px;
    font-family: Myriad Pro, Helvetica Neue, Arial, Helvetica, sans-serif;
    font-weight: 300;
    overflow: hidden;
    line-height: 50px;
    transition: all .3s;
    margin-left: 10px;
}

.layui-layout-admin .layui-header .layui-logo img {
    width: 100%;
    height: auto;
    margin-top: 4px;
}

.layui-layout-admin .layui-header .layui-logo cite {
    font-style: normal;
}

.layui-layout-admin .layui-header .layui-nav-img {
    margin-right: 5px;
}

.layui-layout-admin .layui-header .layui-nav-img + cite {
    margin-right: 5px;
}

.layui-layout-admin .layui-header .layui-nav-child dd {
    text-align: center;
}

.layui-layout-admin .layui-header a {
    cursor: pointer;
}

/** //header样式结束 */

/** 侧边栏样式 */
.layui-layout-admin .layui-side .layui-side-scroll {
    width: 200px;
}

.layui-layout-admin .layui-side {
    top: 50px;
    width: 180px;
    background-color: #334563;
    transition: all .3s;
    -webkit-transition: all .3s;
}

.layui-layout-admin .layui-side .layui-nav {
    width: 180px;
    background-color: #334563;
}

.layui-layout-admin .layui-side .layui-nav .layui-nav-item > a:hover {
    background: transparent;
}

.layui-layout-admin .layui-side .layui-nav .layui-nav-item > .layui-nav-child {
    padding: 0px 0;
    background-color: rgba(37, 52, 79, 1) !important;
}

.layui-layout-admin .layui-side .layui-nav .layui-nav-more {
    right: 10px;
}

.layui-layout-admin .layui-side .layui-nav .layui-nav-item .layui-nav-child a {
    padding-left: 50px; /** 导航字体位置 */
}

.layui-layout-admin .layui-side .layui-nav .layui-nav-item > a {
    padding: 2px 10px;
}
.layui-nav-tree .layui-nav-item {
    border-bottom: solid 1px #425575;
}
/** 侧边栏样式结束 */

/** 主体部分样式 */
.layui-layout-admin .layui-body {
    left: 180px;
    top: 50px;
    padding: 0px;
    transition: all .3s;
    overflow-y: auto;
}
.layui-card {
    background-color: #e7ebf0;
    margin-bottom: 0;
}
/** //主体部分样式结束 */

/** 底部样式 */
.layui-layout-admin .layui-footer {
    left: 220px;
    background: #fff;
    transition: all .3s;
    display: none;
}

/** 底部样式结束 */

/** 侧导航折叠样式PC */
.layui-layout-admin.crown-nav-mini .layui-header .layui-logo {
    width: 60px;
}

.layui-layout-admin.crown-nav-mini .layui-header .layui-logo cite {
    display: none;
}

.layui-layout-admin.crown-nav-mini .layui-header .layui-layout-left {
    left: 60px;
}

.layui-layout-admin.crown-nav-mini .layui-side {
    width: 60px;
}

.layui-layout-admin.crown-nav-mini .layui-side .layui-nav {
    width: 60px;
}

.layui-layout-admin.crown-nav-mini .layui-side-scroll {
    width: 80px;
}

/** 侧导航隐藏文字 */
.layui-layout-admin.crown-nav-mini .layui-side .layui-nav .layui-nav-item > a > cite {
    display: none;
}

.layui-layout-admin.crown-nav-mini .layui-side .layui-nav .layui-nav-item > a .layui-nav-more {
    display: none;
}

.layui-layout-admin.crown-nav-mini .layui-side .layui-nav .layui-nav-item > a {
    overflow: visible;
}

.layui-layout-admin.crown-nav-mini .layui-side .layui-nav .layui-nav-itemed .layui-nav-child {
    display: none;
}

.layui-layout-admin.crown-nav-mini .layui-body {
    left: 60px;
}

.layui-layout-admin.crown-nav-mini .layui-footer {
    left: 60px;
}

.layui-layout-admin.crown-nav-mini .layui-side .layui-nav .layui-nav-itemed > a {
    background: rgba(0, 0, 0, .3);
}

/** 修改折叠的图标 */
.layui-layout-admin.crown-nav-mini .layui-header .layui-icon-shrink-right:before {
    content: "\e66b";
}

/** //侧导航折叠样式结束 */

/** 移动设备样式 */
@media screen and (max-width: 750px) {
    .layui-layout-admin .layui-side {
        position: fixed;
        left: -260px;
        z-index: 10000;
    }

    .layui-layout-admin .layui-body {
        left: 0;
    }

    .layui-layout-admin .layui-footer {
        left: 0;
    }

    .layui-layout-admin .layui-header .layui-logo {
        left: -260px;
    }

    .layui-layout-admin .layui-header .layui-layout-left {
        left: 0;
    }

    .layui-layout-admin .layui-header .layui-icon-shrink-right:before {
        content: "\e66b";
    }

    /* 移动设备侧导航折叠样式 */
    .layui-layout-admin.crown-nav-mini .layui-header .layui-logo {
        width: 180px;
        left: 0;
        z-index: 10001;
        background-color: #001529;
    }

    .layui-layout-admin.crown-nav-mini .layui-header {
        z-index: auto;
    }

    .layui-layout-admin.crown-nav-mini .layui-header .layui-logo cite {
        display: inline-block;
    }

    .layui-layout-admin.crown-nav-mini .layui-header .layui-layout-left {
        left: 0;
    }

    .layui-layout-admin.crown-nav-mini .layui-side {
        width: 180px;
        left: 0;
    }

    .layui-layout-admin.crown-nav-mini .layui-side .layui-nav {
        width: 180px;
    }

    .layui-layout-admin.crown-nav-mini .layui-side-scroll {
        width: 200px;
    }

    .layui-layout-admin.crown-nav-mini .layui-side .layui-nav .layui-nav-item > a > cite {
        display: inline-block;
    }

    .layui-layout-admin.crown-nav-mini .layui-side .layui-nav .layui-nav-item > a .layui-nav-more {
        display: inline-block;
    }

    .layui-layout-admin.crown-nav-mini .layui-side .layui-nav .layui-nav-item > a {
        overflow: hidden;
    }

    .layui-layout-admin.crown-nav-mini .layui-side .layui-nav .layui-nav-itemed .layui-nav-child {
        display: block;
    }

    .layui-layout-admin.crown-nav-mini .layui-body {
        left: 0;
    }

    .layui-layout-admin.crown-nav-mini .layui-footer {
        left: 0;
    }

    /** 移动设备遮罩层 */
    .layui-layout-admin.crown-nav-mini .site-mobile-shade {
        content: '';
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, .2);
        z-index: 9999;
        cursor: pointer;
    }

    .layui-layout-admin.crown-nav-mini .layui-side .layui-nav .layui-nav-itemed > a {
        background: transparent;
    }

    .layui-layout-admin.crown-nav-mini .layui-header .layui-icon-shrink-right:before {
        content: "\e668";
    }
}

/** //移动设备样式结束 */

/** 右侧弹窗样式 */
.layui-layer.layui-layer-crownRight {
    top: 50px !important;
    bottom: 0;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, .1);
    border-radius: 0;
    overflow: auto;
    height: 315px;
}

/** 消息列表样式 */
.message-list {
}

.message-list-item {
    padding: 10px 24px;
    border-bottom: 1px solid #e8e8e8;
    -ms-flex-align: start;
    align-items: flex-start;
    display: flex;
    -ms-flex: 1 1;
    flex: 1 1;
}

.message-list-item:hover {
    background: #F2F2F2;
}

.message-item-icon {
    width: 40px;
    height: 40px;
    margin-right: 16px;
    display: block;
    margin-top: 4px;
}

.message-item-right {
    display: block;
    flex: 1 0;
}

.message-item-title {
    font-size: 14px;
    color: rgba(0, 0, 0, .65);
}

.message-item-text {
    color: rgba(0, 0, 0, .45);
    font-size: 12px;
}

/** //消息列表样式结束 */

/** 主体部分标题样式 */
.layui-card-header .header-title {
    display: inline;
    font-size: 16px;
}

/** 表格搜索框样式 */
.search-input {
    width: 200px;
    display: inline-block;
    height: 36px;
    vertical-align: middle;
    padding: 3px 6px;
}

/** 重写layui默认按钮的高度，因为按钮跟输入框不一样高特别丑 */
.layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {
    height: 32px;
    line-height: 32px;
    background-color: #417ac0;
    border-radius: 4px;
    padding: 0 10px;
    color: #fff;
    min-width: 60px;
}

/** 如果按钮加图标减少内边距 */
.icon-btn {
    padding: 0 8px;
}

.layui-form.toolbar .layui-btn + .layui-btn {
    margin-left: 15px;
}

.model-form-footer .layui-btn + .layui-btn {
    margin-left: 5px;
}

.layui-table-cell .layui-btn + .layui-btn {
    margin-left: 5px;
}

/** 表格上方工具栏样式 */
.layui-form.toolbar {
    color: #333;
    background: #fff;
}

.layui-form.toolbar .layui-form-select input {
    height: 35px;
    line-height: 35px;
    width: 150px;
    overflow: hidden;
}

.layui-form.toolbar .layui-form-select {
    display: inline-block;
    vertical-align: middle;
}

/* 表单弹窗样式 */
.model-form {
    padding: 15px;
}

.model-form-footer {
    text-align: right;
    padding-top: 10px;
    border-right: none !important;
}

/** dialog超出显示 */
.layui-layer-page .layui-layer-content {
    overflow: visible !important;
}

/* layui文档官网右侧弹窗目录列表的样式 */
.site-dir li {
    line-height: 26px;
    margin-left: 20px;
    overflow: visible;
    list-style-type: disc;
}

/** laydate加图标 */
.date-icon {
    background-image: url(../images/icon_date.png);
    background-repeat: no-repeat;
    background-position: right center;
}

/** 辅助样式 */
.layui-link {
    color: #029789 !important;
}

.layui-link:hover {
    opacity: .8;
}

.pull-right {
    float: right;
}

.inline-block {
    display: inline-block;
}

/** 卡片header里面的徽章样式调整 */
.layui-card .layui-card-header .layui-badge.pull-right {
    top: 50%;
    margin-top: -9px;
}

/** 特大字体 */
.lay-big-font {
    font-size: 36px;
    color: #666;
    line-height: 36px;
    padding: 5px 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    white-space: nowrap;
}

/** 超链接样式 */
.layui-text a:not(.layui-btn) {
    color: #01AAED;
}

.layui-text a:not(.layui-btn):hover {
    text-decoration: underline;
}

/** loading组件样式 */
.crown-loading {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -16px -15px;
    font-size: 30px;
    color: #c2c2c2
}
.layui-nav-tree .layui-nav-child dd.layui-this, .layui-nav-tree .layui-nav-child dd.layui-this a, .layui-nav-tree .layui-this, .layui-nav-tree .layui-this>a, .layui-nav-tree .layui-this>a:hover {
    background-color: #417ac0;
    color: #fff;
}
.layui-nav-tree .layui-nav-bar {
    width: 0px;
    height: 0;
    background-color: inherit;
}
.layui-nav .layui-this:after, .layui-nav-bar, .layui-nav-tree .layui-nav-itemed:after {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 5px;
    background-color: inherit;
    transition: all .0s;
    -webkit-transition: all 0s;
}
.layui-nav .layui-nav-item a {
    color: #e4ebf6;
}
/*.layui-colla-title { background: #f2f9ff; color: #256abf;}*/
.layui-colla-title {
    color: #fff;
    position: absolute;
    width: 30px;
    height: 30px;
    line-height: 30px;
    background: #448dd7;
    border-radius: 20px 0 0 20px;
    right: 0px;
    padding: 0 10px;
    z-index: 6;
}
.layui-colla-title i {margin: 0 30px 0 5px;}
.layui-table tbody tr:hover, .layui-table thead tr, .layui-table-click, .layui-table-header,  .layui-table-mend, .layui-table-patch, .layui-table-tool, .layui-table-total, .layui-table-total tr, .layui-table[lay-even] tr:nth-child(even) {
    background-color: #fff;
}
.layui-table tbody tr:hover,.layui-table-hover{
    background-color: #f0f0f0;
}
.layui-table-box {
    background: #fff;
    padding: 10px;
}
.layui-btn-normal {
    background-color: #417ac0;
    border-radius: 4px;
}
.layui-table-header {
    /*border: solid 1px #d0d8e2;*/
}
.layui-table-body {
    /*border: solid 1px #d0d8e2;
    border-top: none;*/
}
.layui-table-header th {
    /*background: #e9f3ff;*/
    color: #333;
    font-weight: bold;
}
.layui-table-header thead tr {
    background: #e9f3ff;
}
.layui-table-tr{background:#f8fbff}
/*.layui-table-body tr:nth-child(even) td {background:#f8fbff}*/
.layui-card-header { background: #fff;}
.layui-table-fixed {
    top: 10px;
}
.layui-bg-blue,.layui-bg-green {
    background-color: #417ac0 !important;
}
.layui-btn-primary {
    border: 0px solid #C9C9C9;
    color: #fff;
}
.layui-form-item {
    border-bottom: none;
    border-left: none;
    /*border: solid 1px #d8dff0;
    overflow: hidden;*/
}
.layui-form-label {
    background: #f7fbff;
    height: 100%;
    overflow: hidden;
    /*margin-bottom: -9999px;
    padding-bottom: 9999px;
    border-right: solid 1px #d8dff0;
    border-left: solid 1px #d8dff0;*/
    color: #343434;
}
.layui-input-block {
    padding: 5px 10px;
    min-height: inherit;
}
.layui-form-item .layui-inline {
    margin-bottom: 0px;
    margin-right: 0px;
}
.layui-form-item .layui-input-inline {
    margin-right: 0px;
    padding: 5px 8px;
}
.layui-form-item {
    margin-bottom: 0px;
}
.layui-input, .layui-select, .layui-textarea {
    height: 32px;
}
.layui-form-item {
    margin-bottom: 0px;
}
.form-theme-table .form-theme-table-col {
    padding: 0px;
    padding-right: 0;
}
.layui-layer-title {
    font-size: 16px !important;
    color: #fff !important;
    background: #417ac0 !important;
}
.layui-layer-setwin a { color: #fff;}
.layui-laypage .layui-laypage-curr .layui-laypage-em {
    background-color: #417ac0;
}
.layui-btn {
    background-color: #417ac0;
}
.layui-form-checked[lay-skin=primary] i {
    border-color: #417ac0 !important;
    background-color: #417ac0;
}
.layui-form-checkbox[lay-skin=primary]:hover i {
    border-color: #417ac0;
}
.layui-table td, .layui-table th, .layui-table-col-set, .layui-table-fixed-r, .layui-table-grid-down, .layui-table-header, .layui-table-page, .layui-table-tips-main, .layui-table-tool, .layui-table-total, .layui-table-view, .layui-table[lay-skin=line], .layui-table[lay-skin=row] {
    border-color: #d0d8e2;
}
.layui-table-view { border:none; margin: 0 0 10px 0;position: relative;z-index: 1;}
.layui-table-page { background:#fff;}
.layui-form-radio>i:hover, .layui-form-radioed>i {
    color: #417ac0;
}
.layui-btn-primary:hover {
    color: #fff;
}.layui-btn-danger {
     background-color: #FF5722 !important;
 }
.layui-elem-field {
    background: #fff;
}
.com-title {font-size: 22px;white-space: nowrap;padding: 0 0 10px 0;color: #2b2b2b;}
.com-title span { display: inline-block !important; vertical-align: middle; width: 4px; height: 18px; background: #417ac0; margin-right: 5px; margin-bottom: 3px;}
.com-title-r { float: right; font-size: 16px;}
.com-title-r input { height: 32px; border:solid 1px #c5d8ec; line-height: 30px; border-radius: 2px; padding-left: 10px; width: 160px; margin: 0 5px;}
.com-title-r input[disabled] {border: none; background: none;}
.layui-field-box {
    padding: 0;
}
.layui-card-body {
    padding: 10px;
}
.layui-form-select dl {
    padding: 0px 0;
}
.layui-form-select dl dd.layui-this {
    background-color: #417ac0;
    color: #fff;
}
.layui-tab-title {
    margin: 10px 10px 0 10px;
    border-bottom: solid 2px #417ac0;
    height: auto;
    text-align: left !important;
}
.layui-tab-title li {
    background: #fff;
    margin-right: 5px;
    border-radius: 5px 5px 0 0;
    height: 38px;
    line-height: 40px;
}
.layui-tab-brief>.layui-tab-title .layui-this {
    color: #fff;
    background: #417ac0;
}
.layui-tab-brief>.layui-tab-more li.layui-this:after, .layui-tab-brief>.layui-tab-title .layui-this:after {
    border: none;
    border-radius: 0;
    border-bottom: 0px solid #5FB878;
}
.layui-tab-content {
    padding: 0px;
}
.layui-layout-admin .layui-body {
    bottom: 0;
}
.layui-btn .layui-icon {
    font-size: 14px;
}
.layui-table-tool {
    min-height:50px;
    padding: 10px;
}
.mgtl-10 {margin: 10px 0 0 10px;}
.tree-list {/* padding:10px; */}
.tree-list ul {width:100%; height:auto; overflow: hidden;}
.tree-list li { white-space:nowrap;text-overflow:ellipsis;margin:0;padding:5px 10px;font-size:16px;color:#171717;height:40px; overflow: hidden;line-height:40px;border-bottom:solid 1px #e5e5e5;}
.tree-list li::before { content:""; display:inline-block; width:6px; height:6px; border:solid 1px #828282; border-radius:8px 8px; vertical-align:middle; margin-bottom:3px; margin-right:6px;}
.tree-list .layui-this { background:#4b8cdc; border-radius:4px; border-bottom:none; color:#fff;}
.tree-list .layui-this a { color:#fff;}
.tree-list .layui-this::before {  border:solid 1px #fff;}
.tree-search {padding-bottom:10px;}
.tree-search .layui-input { border-radius:0 !important; vertical-align:middle; text-align:left !important;}
.tree-search .layui-btn {border-radius:0 !important; height:34px !important; vertical-align:middle;}
.layui-breadcrumb a:hover {
    color: #417ac0!important;
}

html,body { height: 100%;}
* { padding: 0; margin: 0;}
.body-bg { width: 100%; height: 100%; background: url(../image/loginBg.jpg) no-repeat center;}
.login { margin: 0px auto; padding-top: 12%;}
.login-img { width: 50%; float: left; text-align: right;}
.login-img img { margin-right: 5%; max-width: 100%;}
.login-box { width: 50%; float: left;}
.login-box img { max-width: 100%;}
.login-box ul { margin: 40px 0 0px 80px; height: auto; overflow: hidden;}
.login-box ul li { list-style: none; margin-bottom: 20px;}
.login-box ul li div { height: auto; width: 350px; background: #fff; border-radius: 10px; padding: 5px 10px;}
.login-box ul li img { vertical-align: middle;  margin-bottom: 3px; width: 24px; height: 24px;}
.login-box ul li input { height: 40px; border: none; font-size: 18px; line-height: 40px; padding-left: 10px; width: 300px;}
.login-box ul li input:focus {outline: none;}
.login-btn { margin: 45px 0; display: block; width: 370px; height: 50px; line-height: 50px; box-shadow: 0 6px 8px rgba(0,75,168,.6); border-radius: 25px;background: #dcecff; /* Old browsers */
    background: -moz-linear-gradient(bottom, #f4f9ff 0%, #cae3ff 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(bottom, #f4f9ff 0%,#cae3ff 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #f4f9ff 0%,#cae3ff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f9ff', endColorstr='#cae3ff',GradientType=0 ); /* IE6-9 */ text-align:center; font-size: 24px; color: #2152c0; text-decoration: none;}
.login-btn:hover { color: #2152c0;}
.login-error { color: #ff3232; text-align: center; width: 370px; margin-left: 80px;}

.tree-show {height:calc(100% - 24px);margin: 10px 0px 0px 10px;background-color: white;}
.layui-tree-card{ height: 100%;}
.layui-tree-row{height: calc(100% - 44px);}
.layui-tree-tab{height: calc(100% - 54px);}
.layui-tree-tab-content{height: calc(100% - 40px);}
.layui-tab-tree-item{height: 100%;}
.layui-tree-tab-row{height: 100%;}
.layui-tree-col-md2{height:calc(100% - 20px);}
.layui-elem-field { border:none;}

@media screen and (min-width:0\0) {
    .layui-tree-elem-field{height: 100%;}
}

.index-main { padding: 10px; height: auto; overflow: hidden;}
.com-box { background: #fff; padding: 15px; height: auto; overflow: hidden; margin-bottom: 10px; position: relative;}
.index-sb {height: 380px; padding-top: 70px; overflow: auto; display: table; width: 100%; position: relative;}
.jg-name { text-align: center; font-size: 24px; color: #222; width: 100%; position: absolute; top: 10px;}
.jg-sb { padding: 10px 1%; height: auto;overflow: hidden; text-align: center;}
.jg-sb li { width: 27.66%; font-weight: 0; display: inline-block;min-height: 330px; position: relative; text-align: left;}
.jg-sb .w10 { width: 7%;}
.item-2 li { width: 33%;}
.item-2 .w10 { width: 10%;}
.jg-box { box-shadow: 0 2px 5px rgba(0,0,0,.13);border-radius: 4px; height: auto; background: #fff; overflow: hidden;}
.jg-box .title { height: 70px; background: #689ddf; color: #fff; font-size: 18px; padding: 0 15px;  line-height:70px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.jg-box .title i { font-size: 34px; float: left; margin-right: 10px;}
.jg-con { padding:0px 15px; height:240px; overflow: auto;border: solid 1px #f1f1f1;}
.jg-con .item {border-radius: 3px; border: dashed 1px #b6bccb; padding:10px; position: relative; margin: 15px 0;}
.jg-con .item p { line-height: 20px; padding: 2px 0; color: #1d2e4d; position: relative; padding-left: 75px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.jg-con .item .btn-test { display: inline-block; padding: 0 8px; height: 24px; line-height: 26px; border-radius: 3px; border: solid 1px #3480de; color: #3480de; text-align: center; position: absolute; bottom: 0px; right: 0px; font-size: 13px;}
.jg-con .item label { width: 75px; text-align: right; color: #788cb1; display: inline-block; position: absolute; left: 0; top: 2px;}
.icon-online { position: relative; display: inline-block; padding: 2px 8px 2px 18px; height: 18px !important; line-height: 18px !important; border-radius: 3px; font-size: 14px; color: #fff;background: #3db84f;}
.icon-online:before {content: ""; background: #fff; width: 6px; height: 6px;  border-radius: 3px; margin-right: 5px; position: absolute; left: 8px; top: 8px;}
.item.outline { background: #fffbfb; border: dashed 1px #ff7171;}
.outline .icon-online {background: #b8b8b8;}
.netstat { color: #3db84f; position: absolute; top: 150px; left: 5%; height: 30px; text-align: center; width: 90%; }
.netstat span { position: absolute; top: -16px; left: 0; width: 100%; text-align: center;}
.netstat:before { content: ""; height: 2px; background:#3db84f; position: absolute; top: 6px; left: 5%; width: 90%;}
.netstat .iconfont { font-size: 14px;}
.netstat .zuosanjiao { float: left;}
.netstat .yousanjiao { float: right;}
.netstat.outline { color: #ff3a3a;}
.netstat.outline:before { content: ""; height: 2px; background:#ff3a3a;}
.btn-more { float: right; height: 26px; line-height: 26px; color: #ffffff; border:solid 1px #fff; border-radius: 3px; display: inline-block; font-size: 14px; padding: 0 10px; margin-top: 20px;}
.btn-more:hover { color: #fff;}

.jg-bj .title { background: #4695f0; height: 140px; position: relative;}
.jg-bj .title i { font-size: 50px; color: #4b9efd; width: 98px; margin-top: 20px; text-align: center; line-height: 95px;}
.jg-bj .title i:before { display: block; width: 92px; height: 92px; background: #fff; border:solid #7eb5f5 3px; border-radius: 100% 100%;}
.jg-bj .title p {font-size: 19px; line-height: 25px; margin: 25px 0 5px 0; white-space:normal; overflow: inherit; width:150px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}
.jg-bj .title span { display: block; font-size: 14px; line-height: 25px;}
.jg-bj .title .icon-online { display: inline-block; position: absolute; right: 15px; top: 15px;}
.jg-bj .outline {background: #ededed; color: #666;}
.jg-bj .outline .icon-online { background: #ccc;}
.jg-bj .outline i { color: #ccc;}
.jg-bj .outline i:before {border:solid #ccc 3px;}

.percent { padding: 20px 20px 20px 25px; color: #788cb1; font-size: 16px;height:140px;}
.percent .item { padding: 12px 0; }
.percent .item p { width: calc(100% - 130px); display: inline-block; height: 12px; border-radius:6px 6px; background: #e9e9e9; overflow: hidden; margin: 0 5px;}
.percent .item p span { display: inline-block; background: #67aeff; height: 12px;border-radius:6px; float: left;}
.percent .item label { color: #1d2e4d;}

.jg-count { width: 50%; padding:25px 0; float: left; display:inline-block;}
.jg-con .bd-b { border-bottom: dashed 1px #d3d3d3;}
.jg-count i { width: 60px; float: left; position: relative; text-align: center; font-size: 56px; color: #52a3ff; margin-right: 5px; margin-left: 10px;}
.jg-count p { font-size: 15px; margin-top: 5px}
.jg-count p a { display: block; font-size: 26px; color: #2c86ed;}
.xj-outline i { color: #93a8c2;}
.xj-outline p a { color: #ff4f4f;}
.index-tab { height: 50px; width: 320px; margin: 30px auto 10px auto;}
.index-tab i { font-size: 24px; margin-right: 5px; vertical-align: middle;}
.index-tab li { border-radius: 8px 4px 4px 8px; font-size: 16px; width: 160px; height: 50px; line-height: 50px; text-align: center; background-color: #f4f9ff; -moz-transform: skew(45deg); -ms-transform: skew(45deg); -webkit-transform: skew(45deg); transform: skew(45deg);float: left; color: #939ba4; cursor: pointer;}
.index-tab li p { -moz-transform: skew(-45deg);-ms-transform: skew(-45deg); -webkit-transform: skew(-45deg);transform: skew(-45deg); }
.index-tab .current { background: #3a7ed3; color: #fff;}

.file-count { padding: 20px 0; height: 330px;}
.file-count li { width: 30%; float: left; height: 100%;position: relative; font-size: 13px;}
.file-count .w35 { width: 35%;}
.file-count .ywxt-icon,.file-count .td-icon { width: 90px; height: 120px; border-radius: 6px; color: #fff; text-align: center; display: inline-block; position: absolute; top: 50%;  margin-top: -43px;}
.file-count .ywxt-icon i,.file-count .td-icon i { width: 90px; font-size: 60px; line-height: 40px; display: block; margin-top: 30px; }
.file-count .ywxt-icon {  background: #4aa0fc; border:solid 3px #d4e8fe; left: 20px;}
.file-count .td-icon { background: #00c9bd; border:solid 3px #c2f2ef;right: 20px;}
.file-count .title { height: 40px; background: #f1f8ff; color: #222; padding: 0 10px; line-height: 40px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.file-count .title i { font-size: 20px; color: #4b9efd; vertical-align: middle;margin-right: 5px;}
.file-count .item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px;  padding: 0 10px;}
.file-count .item span { font-size: 24px; display: block; margin-top: 13px;}

.file-count .ywxt-box { padding:0 25% 0 140px; color: #222;}
.file-count .ywxt-box .count { height: 120px; border: solid 1px #c5d8ec; border-radius: 4px; margin-top: 40px;}
.file-count .ywxt-box .count .item { font-size: 0; text-align: center;}
.file-count .ywxt-box .count p { display: inline-block; width: 50%; padding-top: 5px; font-size: 14px;}
.file-count .ywxt-box .count p span {color: #047ce5;}

.file-count .bj-box { border: solid 1px #c5d8ec; border-radius: 6px; height: 318px; margin-right: 30%; overflow: hidden;}
.file-count .bj-box .item { margin:8px auto; width: 80%; height: 68px;  border-radius: 4px; text-align: center;}

.file-count .td-box {margin-right: 140px; margin-top: 45px;}
.file-count .td-box .item { height: 70px; text-align: center; border-radius: 4px; margin-top: 10px; }
.file-count .td-box .item p { width: 33.33%; float: left;}

.file-count .line { width: 23%; height: 100%;position: absolute; top: 0; right: 1%; color: #222;}
.file-count .line div { text-align: center;width: 100%; height: 20px; color: #222; border-bottom: solid 2px #c3d2e0; position: absolute; right: 0; top: 20px; padding-bottom: 5px; font-size: 14px; white-space: nowrap; }
.file-count .line div::after {content: "\e63f";color: #c3d2e0; font-size: 14px; position: absolute; right: -4px; bottom: -9px;}
.file-count .line .line1 { top:60px;}
.file-count .line .line2 { top:115px; border-bottom: solid 2px #ffd298; }
.file-count .line .line2:after {color: #ffd298;}
.file-count .line .line3 { top:240px; border-bottom: solid 2px #51d4cc;}
.file-count .line .line3::after {content:"\e640"; left: -4px; right: auto; color: #51d4cc;}
.file-count .bj-line { width: 28%;}
.file-count .bj-line .line2 { top: 130px;}

.bg-blue {background: #f1f8ff; border: dashed 1px #c5d8ec;}
.bg-yellow { background: #fffbf1; border: dashed 1px #ffe39e;}
.bg-green { margin-top: 30px !important; background: #eefffe; border: dashed 1px #8fdad6;}
.bg-red { background: #ffeded; border: dashed 1px #ff4e4e;}
.bg-blue span { color: #047ce5;}
.bg-yellow span { color: #ff983c;}
.bg-green span { color: #00a89e;}
.bg-red span { color: #ff4e4e;}
.green { color: #00a89e !important;}

.red { color: #ff4e4e !important;}
.com-tab { height: 40px; border-bottom: solid 2px #4486d7;}
.com-tab li { padding: 0 15px; min-width: 80px; text-align: center; display: inline-block; float: left; margin-right: 4px; background: #fff; line-height: 40px; border-radius: 6px 6px 0 0; color: #666; font-size: 16px; cursor: pointer;}
.com-tab li a {color: #666;}
.com-tab li.current { background: #4486d7; color: #fff;}
.com-tab li.current a { color: #fff;}
.com-card-tab { float: right; margin-bottom: 5px;}
.com-card-tab li { display: inline-block; float: left; height: 34px; line-height: 34px; padding: 0 5px; border: solid 1px #dfdfdf; color: #999; font-size: 14px; cursor: pointer;}
.com-card-tab li:nth-child(1) {border-radius: 4px 0 0 4px;}
.com-card-tab li:nth-last-child(1) {border-radius: 0px 4px 4px 0px; border-left: none;}
.com-card-tab i { font-size: 15px; vertical-align: middle; margin:0 5px;}
.com-card-tab li.current { background: #448dd7;  color: #fff;border: solid 1px #448dd7;}

.file-card-count { height: auto; overflow: hidden; position: relative; padding-bottom: 10px;}
.file-card-count i { position: absolute; top: 25px; left: 10px; width: 66px; height: 66px; text-align: center;font-size: 28px; color: #fff; line-height: 60px;}
.file-card-count i:before { display: block; float: left;background: #4aa0fc; width: 60px; height: 60px; border-radius: 100% 100%; border:solid 3px #d4e8fe;}
.file-card-count ul { margin-left: 80px;}
.file-card-count li { box-sizing: border-box; font-size: 18px; float: left; width: 16%; height: auto; overflow: hidden;  margin-top: 5px; text-align: center; padding: 25px 0;}
.file-card-count .special li {width: 14%;}
.file-card-count li p {border-right: dashed 1px #c5d8ec; height: 55px;}
.file-card-count li:nth-last-child(1) p { border-right: none;}
.file-card-count span { display: block;font-size: 26px; color: #047ce5;}
/*.file-up li { border-bottom: dashed 1px #c5d8ec;}*/
.file-down i:before { background: #00c9bd; border:solid 3px #c2f2ef;}
.file-down span {color: #00c4ab;}
.file-down li { width: 33.3%;}

.index-jg-card { border: solid 1px #dce6f2; border-radius: 4px;/* height: 140px;*/ color: #222; height: auto; overflow: hidden; margin: 10px 0;}
.index-jg-card .title { height: 50px; background: #eff6ff; padding: 0 15px; line-height: 50px; font-size: 18px;}
/*.index-jg-card li { width: 20%; height: 45px; float: left; text-align: center; margin: 20px 0;}
.index-jg-card li p { border-right: solid 1px #c5d8ec;}
.index-jg-card li:nth-last-child(1) p { border-right: none;}
.index-jg-card li span { font-size: 24px; color: #047ce5; display: block;}*/
.item-4 li { width: 25%;}

.pop-top { height: auto; overflow: hidden; margin-bottom: 10px;}
.title-search { display: inline-block; float: left; position: relative;}
.title-search i { font-size: 14px; color: #bababa; position: absolute; left: 6px; top: 10px; z-index: 2;}
.title-search input { width: 150px; height: 34px; border: solid 1px #ccc; border-right: none; line-height: 34px; border-radius: 4px 0 0 4px; padding-left: 20px; position: relative; display: inline-block; vertical-align: middle; font-size: 14px;}
.title-search a { display: inline-block; vertical-align: middle; background: #417ac0; width: 40px; height: 36px; text-align: center; color: #fff; font-size: 16px; border-radius: 0 4px 4px 0;}
.title-search a i { position: inherit; color: #fff; font-size: 18px; line-height: 34px;}
.com-tab2 { margin-top: 3px; padding-left: 10px; display: inline-block; float: left; vertical-align: middle;}
.com-tab2 a { display: inline-block; padding: 0 15px; border: solid 1px #dcdcdc; color: #666; font-size: 16px; height: 30px; line-height: 30px; border-radius: 16px; margin: 0 3px;}
.com-tab2 .current {background: #4486d7; color: #fff; border: solid 1px #4486d7;}

/*.pop-jg-list { max-height: 450px; overflow: auto; }*/
.pop-jg-list .jg-box { margin-bottom: 18px;}
.pop-jg-list .title { height: 42px;  line-height: 42px; font-size: 16px; background: #dce3eb;color: #222;}
.pop-jg-list .title i { font-size: 20px; color: #999;}
.pop-jg-list .title>* { vertical-align: middle;}
.pop-jg-list .jg-con { padding:10px; height: auto; margin: 0; /*border: solid 1px #dce3eb;*/}
.pop-jg-list .item {margin: 0;}

.process { padding-left: 20px;}
.process p { display: inline-block; float:left; margin-left: -20px; font-size: 12px;}
.process i { font-size: 14px; color: #ddd; margin-left: 20px; vertical-align: middle;}
.process .line { height: 2px; width: 60px; background: #dddddd; display: inline-block; vertical-align: middle;}
.process label { display: block;}
.process i:before { content: "\e646";}
.process .ok .line,.file-info-process .ok .line { background:#00ce88; }
.process .ok i:before,.file-info-process .ok i:before { content: "\e647";color: #00ce88;}
.process .alarm i:before,.file-info-process .alarm i:before { color: #ff3535;}
.file-info-process .ok .line { background:#00ce88; }
.process p:nth-last-child(1) .line,.file-info-process li:nth-last-child(1) .line { display: none;}

.file-info { border: solid 1px #d0d8e2; margin-left: 10px;}
.file-info-top { background: #f8fbff; border-bottom: solid 1px #d0d8e2; padding: 10px; color: #222;}
.file-info-top p { padding: 2px 0;}
.file-info-top label {color: #666;}
.file-info-process { padding: 15px;}
.file-info-process li { height: auto; overflow: hidden; position: relative; min-height: 50px; padding-bottom: 15px;}
.file-info-process li:nth-last-child(1) { min-height: inherit;}
.file-info-process label { display: block; color: #222; font-size: 14px;}
.file-info-process i { font-size: 16px; color: #ddd; width: 25px; float: left; position: absolute; left: 0; top: 0;}
.file-info-process i:before { content: "\e646";}
.file-info-process .line { position: absolute; height: 100%; left: 7px; top: 18px; width: 2px;background: #dddddd;}
.file-info-process .con { line-height: 20px; display: inline-block; color: #999; font-size: 13px;margin-left: 25px;}

input::-webkit-input-placeholder{ color:#8b8b8e; font-size: 14px;}
input::-moz-placeholder{   /* Mozilla Firefox 19+ */color:#8b8b8e;}
input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */color:#8b8b8e;}
input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ color:#8b8b8e;}

/* 拓扑图 */
.tuopu-main {display:table-cell;position:relative; vertical-align: middle; text-align: center; overflow: auto;}
.tuopu-box {display: inline-block; max-height: 380px;margin-top:40px;}
.tuopu-down {float:left; }
.item-box-wrap {position:relative;float:left;}
.item-box {width:auto; display:inline-block; cursor:pointer; float:left; position: relative; padding: 0px 20px;}
.tuopu-tip {padding:10px 15px; background:#fff; border:1px solid #d3d4d8; border-radius:3px; line-height:23px;color:#8696b4;position:absolute;top:65%;left:60%;z-index:100;width: max-content; white-space: nowrap; text-align: left;}
.tuopu-tip span {color:#2a3b5b;}
.tuopu-tip label { display: inline-block; width: 70px; text-align: right; float:left;}
.item-box-wrap + .item-box-wrap {
    margin-left:20px;
}
.item-box .icon {
    width:66px;
    height:66px;
    background:#539df1;
    border-radius:100%;
    text-align:center;
    margin:0 auto;
}
.item-box .icon i {
    font-size:60px;
    color:#fff;
}
.item-box h6 {
    margin-top:-22px;
    transform: scale(0.8);
    font-size:12px;
    font-weight:normal;
    color:#fff;
}
.item-box .name {
    margin:3px 0 0 0;
    font-size:13px;
    color:#2a3b5b;
}
.item-box .name i {
    margin:0 0 0 5px;
    padding:0 6px;
    background:#80c269;
    border-radius:3px;
    font-style:normal;
    font-size:12px;
    line-height:19px;
    color:#fff;
    display:inline-block;
}

.onlineShow {
    margin:0 0 0 5px;
    padding:0 6px;
    background:#80c269;
    border-radius:3px;
    font-style:normal;
    font-size:12px;
    line-height:19px;
    color:#fff;
    display:inline-block;
}

.Devname{
    width:50px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline;
    float: left
}
.item-box-wrap.tuopu-current .name {
    font-size:14px;
}
.tuopu-up {
    margin-top:0;
    float:left;
}
.tuopu-up .item-box .icon {
    background:#4f7ee8;
}
.tuopu-down .item-box .icon {
    background:#79b6fb;
}
.item-box.offline .name {
    color:#bbb;
}
.item-box.offline .icon, .item-box.offline .name i {
    background:#ccc;
}
.line-row {
    min-width:50px;
    margin:30px 0 0 0;
    padding:0 15px;
    text-align:center;
    font-size:14px;
    line-height:26px;
    color:#000;
    float:left;
    position:relative;
}
.line-row:after {
    content: "";
    border-bottom:2px dashed #80c269;
    position:absolute;
    left:0;
    right:0;
    top:0;
}
.tuopu-up .line-row:after, .sed-level .line-row:after {
    top:27px;
}
.line-row .state {
    color:#80c269;
}
.outline .line-row .state {
    color:#fb7a7a;
}
.sed-level {
    float:left;
    position:relative;
}
.tuopu-up .sed-level {
    margin:0 0 0 20px;
}
.sed-level:after {
    content: "";
    border-left:2px dashed #80c269;
    position:absolute;
    top:58px;
    bottom:58px;
}
.tuopu-up .sed-level:after {
    display:none;
}
.tuopu-up .sed-level:after {
    right:0;
    bottom:102px;
}
.sed-level li {
    display:block;
    position:relative;
}
.sed-level li + li {
    margin-top:15px;
}
.sed-level li:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.line-row.outline:after, .outline .line-row:after, .outline .sed-level:after {
    border-color:#fb7a7a;
}
.team-box {
    margin:0 0 0 5px;
    padding:12px 16px;
    background:#fbfbfb;
    border:1px dashed #c7cbd4;
    border-radius:5px;
    float:left;
}

.item-count {
    margin: 10px 0 0;
}

.item-count div{
    padding: 10px;
    margin: 1%;
    width: 20%;
}

.item-count div:hover {
    opacity:0.8;
}

.item-count div:nth-child(-n+2){
    float: left;
}

.item-count div:nth-child(n+3){
    margin-top: 10px !important;
    float: right;
}

.item-col {
    padding: 10px;
}

.item-col span:first-child{
    width: 30%;
    display: inline-block;
}

.item-col span:last-child{
    width: 60%;
    display: inline-block;
}

.item-col .online {
    color: #80c269;
}

.item-col .outline {
    color: #ff3a3a;
}

.sdt-upgrade {
    margin: 10px;
    text-align: center
}

.sdt-upgrade p{
    height: 20px;
    width: 200px;
}

.sdt-upgrade div{
    margin: 10px;
}

.sdt-upgrade div{
    margin: 10px;
}

.sdt-upgrade span{
    display: block;
    margin: 40px auto 20px;
}




